<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.使用React</title>
    <!-- 1. 引入react -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>
<body>
    <h1>01.使用React</h1>
    <!-- 2.创建根节点 -->
    <div id="app">
       
    </div>
    <script>
        // 3.创建根节点（关联真实节点）
        const root = ReactDOM.createRoot(document.querySelector('#app'))

        // 4. 在根节点中渲染内容： root.render(VirtualDOM)
        // root.render('hello');// 渲染文本节点

        // 创建真实节点：
        // const rnode = document.createElement('div')
        // rnode.innerHTML = 'hello'
        // rnode.className = 'box'

        // 创建虚拟节点：
        // <div class="box">hello</div>
        // const vnode = React.createElement('div',{className:'box'},'hello');

        //  <div class="box"><h4>hello</h4></div>
        // const vnode = React.createElement(
        //     'div',
        //     {className:'box'},
        //     React.createElement('h4',null,'hello')
        // );

        //  <div class="box"><h4>Hello</h4><ul><li>React</li><li>ReactDOM</li></ul></div>
        const vnode = React.createElement(
            'div',
            {className:'box'},
            [
                React.createElement('h4',null,'Hello'),
                React.createElement('ul',null,[
                    React.createElement('li',null,'React'),
                    React.createElement('li',null,'ReactDOM'),
                ]),
            ]
        );

        // JSX
        // vnode = <div class="box">
        //     <h4>Hello</h4>
        //     <ul>
        //         <li>React</li>
        //         <li>ReactDOM</li>
        //     </ul>
        // </div>

        root.render(
            vnode
        )

        
    </script>
</body>
</html>